<template>
    <div>
        <!-- 面包屑导航 -->
        <elBread></elBread>
        <!-- 添加按钮 -->
        <el-button @click="addMenu" type="primary" plain>添加</el-button>
        <!-- 表格 -->
        <list @edit="edit"></list>
        <!-- 弹窗 -->
        <dia-log :isShow="isShow" :isAdd="isAdd" @cancel="cancel" ref="diaRef"></dia-log>
    </div>
</template>
<script lang='ts' setup>
// 引入侧边栏组件
import elBread from '@/components/el-bread.vue';
// 引入表格组件
import list from './list.vue';
// 引入弹窗组件
import diaLog from './dialog.vue';
import { ref } from 'vue';
// 引入内置规则
import type { FormInstance, FormRules } from 'element-plus'

// 用户控制弹窗的显示和隐藏
let isShow = ref(false);
// 是否为添加表单
let isAdd = ref(true);
// 弹出弹窗
const addMenu = () => {
    isShow.value = true;
    // 是添加
    isAdd.value = true;
}
// 关闭弹窗
const cancel = (e: boolean) => {
    isShow.value = e;
}
// 通过ref获取dialog组件
let diaRef = ref<any>()
// 编辑
const edit = (id:string) => {
    // 弹出弹窗
    isShow.value = true;
    // 是编辑
    isAdd.value = false;
    // 数据回显  使用ref调用子元素的方法
    diaRef.value.lookup(id);
}
</script>
<style scoped lang='less'>
.el-button {
    margin: 20px 0 10px;
}
</style>